<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
            <el-form-item label="单元" prop="unitId">
                <el-cascader v-model="unitId" :options="units" @change="unitChecked" clearable :style="{ width: '100%' }"></el-cascader>
            </el-form-item>
          
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']">新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['system:role:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['system:role:remove']">删除</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['system:role:export']"
            >导出</el-button
          >
        </el-col> -->
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <div class="Jcommon-layout-main Jflex-main">
                <div class="Jcommon-head">
                    <div class="tips">
                        <div class="tips-item">
                            <span class="icon empty">●</span>
                            空置
                        </div>
                        <div class="tips-item">
                            <span class="icon rented">●</span>
                            已出租
                        </div>
                        <div class="tips-item">
                            <span class="icon selled">●</span>
                            已出售
                        </div>
                        <div class="tips-item">
                            <span class="icon warn">●</span>
                            即将到期
                        </div>
                        <div class="tips-item">
                            <span class="icon error">●</span>
                            租约逾期
                        </div>
                    </div>
                </div>

                <div style="overflow-y: scroll">
                    <div>
                        <div v-if="tableItems.length == 0" style="padding-left:30px;">
                            商铺信息为空，请选择其他楼栋进行查询
                        </div>
                        <div v-else class="floorDiv" v-for="(item, index) in Object.keys(floorGroup)" :key="index">
                            <div class="floorInfo">{{ item }}层</div>
                            <div style="flex: 1; display: flex; flex-wrap: wrap">
                                <div class="houseDiv" v-for="(house, houseindex) in floorGroup[item]" :key="houseindex">
                                    <div class="header empty-background" v-if="house.houseStatus == '闲置'">
                                        <div class="title-box">{{ house.houseCode }}（{{ house.area }}㎡）</div>
                                    </div>
                                    <div class="header rented-background" v-if="house.houseStatus == '出租'">
                                        <div class="title-box">{{ house.houseCode }}（{{ house.area }}㎡）</div>
                                    </div>
                                    <div class="header selled-background" v-if="house.houseStatus == '使用'">
                                        <div class="title-box">{{ house.houseCode }}（{{ house.area }}㎡）</div>
                                    </div>
                                    <!-- <div class="header" :class="house.showState + '-background'">
                                        <div class="title-box">{{ house.houseCode }}（{{ house.area }}㎡）</div>
                                    </div> -->
                                    <div class="body">
                                        <div v-if="house.houseStatus == '闲置'" class="text">{{house.remark || '空置'}}</div>
                                        <div v-else-if="house.houseStatus == '使用'" class="text">
                                            {{house.stateCompany}}
                                            <br/>
                                            已出售
                                        </div>
                                        <div v-else class="text">
                                            {{house.stateCompany}}
                                            <br/>
                                            {{ parseTime(house.stateEndTime, '{y}-{m}-{d}') }}到期
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <!-- 表格数据 -->
       
        <!-- 添加或修改配置对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="所属单元">
                    <el-select v-model="form.unitId" placeholder="请选择">
                        <el-option v-for="dict in unitDict" :key="dict.value" :label="dict.label" :value="dict.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼栋编码" prop="unitId">
                    <el-input v-model="form.buildingCode" placeholder="请输入楼栋编码" />
                </el-form-item>
                <el-form-item label="楼栋名称" prop="buildingName">
                    <el-input v-model="form.buildingName" placeholder="请输入楼栋名称" />
                </el-form-item>
                <!-- <el-form-item label="单元地址" prop="location">
                    <el-input v-model="form.location" placeholder="请输入单元地址" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                </el-form-item> -->
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<script setup name="BuildingUnit">
// curd 顺序导入
import { addHouse as addItem, deleteHouse as deleteItem, updateHouse as updateItem, listHouse as itemList, getHouse as getItem } from "@/api/core/house";
import request from "@/utils/request";
import {groupBy} from "@/utils/ruoyi";
const { proxy } = getCurrentInstance();

const itemName = ref('房产');
const ids = ref([]);
const open = ref(false);
const single = ref(true);
const multiple = ref(true);
const loading = ref(false);
const dateRange = ref([]);
const showSearch = ref(true);
const units = ref([])
const selectedUnit = ref('');
const floorGroup = ref([])
const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        order: 'AES'
    }
});
// 级联
const { queryParams, form } = toRefs(data);
const total = ref(0);
const tableItems = ref([]);
function initUnits(){
    request({
        url:'/building/units/cascader',
        method:'get',
    }).then(res=>{
        units.value = res;
    })
}
function unitChecked(e){
    let arr = e;
    selectedUnit.value = arr[2];
    queryParams.value.buildingUnitId = selectedUnit.value;
    getList();
    //console.log(arr[2])
}
/** 重置新增的表单以及其他数据  */
function reset() {
    proxy.resetForm("formRef");
}
/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
}
function getList() {
    loading.value = true;
    itemList(queryParams.value).then(
        (res) => {
            console.log(res);
            loading.value = false;
            tableItems.value = res.content;
            let group = groupBy(res.content,(ele)=>{
                return ele.floor;
            })
            floorGroup.value = group;
            console.log(group)
            total.value = res.totalElements;
        }
    );
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    console.log(queryParams.unitId)
    getList();
}
/** 重置按钮操作 */
function resetQuery() {
    dateRange.value = [];
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 添加角色 */
function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加" + itemName.value;
}
/** 修改角色 */
function handleUpdate(row) {
    reset();
    const id = row.id || ids.value;
    getItem(id).then((response) => {
        form.value = response;
        open.value = true;
        title.value = "修改" + itemName.value;
    });
}
/** 删除按钮操作 */
function handleDelete(row) {
    const delIds = row.id || ids.value;
    proxy.$modal
        .confirm('是否确认删除编号为"' + delIds + '"的数据项?')
        .then(function () {
            return deleteItem(delIds);
        })
        .then(() => {
            getList();
            proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}
/** 提交按钮 */
function submitForm() {
    if (form.value.id != undefined) {
        updateItem(form.value).then((response) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
        });
    } else {
        addItem(form.value).then((response) => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
        });
    }
}
// 初始词典
initUnits();
// getList();
</script>
<style scoped lang="scss">
    .empty {
        color: #909399;
    }
    .rented {
        color: #1890ff;
    }
    .selled {
        color: #20b2aa;
    }
    .warn {
        color: #e6a23c;
    }
    .error {
        color: #f56c6c;
    }
    .empty-background {
        background-color: #909399 !important;
    }
    .rented-background {
        background-color: #1890ff !important;
    }
    .selled-background {
        background-color: #20b2aa !important;
    }
    .warn-background {
        background-color: #e6a23c !important;
    }
    .error-background {
        background-color: #f56c6c !important;
    }
    .tips {
        margin-left: 20px;
        margin-bottom: 20px;
        text-align: left;
        .tips-item {
            line-height: 20px;
            font-size: 16px;
            display: inline-block;
            margin-right: 15px;
            .icon {
                font-size: 20px;
            }
        }
    }
    
    .floorDiv {
        display: flex;
    
        .floorInfo {
            height: 70px;
            width: 70px;
            line-height: 70px;
            text-align: center;
            border: 1px solid #ccc;
            box-shadow: 5px 5px 2px #ccc;
            margin-right: 35px;
            margin-left: 20px;
        }
    
        .houseDiv {
            width: 210px;
            min-height: 82px;
            font-size: 12px;
            border-radius: 4px;
            text-align: left;
            cursor: pointer;
            overflow: hidden;
            position: relative;
            box-sizing: border-box;
            box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
            background-color: #fff;
            margin-bottom: 15px;
            margin-right: 15px;
    
            .header {
                background-color: #1890ff;
            }
    
            .header {
                padding-left: 16px;
                padding-right: 30px;
                width: 100%;
                height: 24px;
                line-height: 24px;
                color: white;
                position: relative;
                box-sizing: border-box;
    
                .title-box {
                    position: relative;
                    display: inline-block;
                }
            }
    
            .body {
                position: relative;
                padding: 12px;
                padding-right: 30px;
                box-sizing: border-box;
    
                .text {
                    margin: 0;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
    </style>
    